<script setup>
import { ref, onMounted } from 'vue'
import { useI18n } from 'vue-i18n'
import api from '@/apis'
import { showNotify } from 'vant'
const { t } = useI18n()
const show = ref(false)

let userInfo = ref({})
let teamList = ref([])
let init = async () => {
  api.home.teamList().then(res => {
    teamList.value = res
  })
  const res = await api.home.userInfo()
  userInfo.value = res
}
onMounted(() => {
  // init()
})

// 复制内容到剪贴板
const copyContent = async (content, type) => {
  const targetUrl = window.location.href
  const urlObj = new URL(targetUrl)
  let text = urlObj.origin + "/#/index?code=" + content
  try {
    await navigator.clipboard.writeText(text)
    showNotify({ type: 'success', message: '复制成功' })
    return true
  } catch (err) {
    // 如果不支持Clipboard API，使用备用方法
    if (type === 'html') {
      // HTML内容使用execCommand无法直接复制
      throw new Error('浏览器不支持HTML复制')
    }
    return fallbackCopyText(text)
  }
}

// 备用复制方法
const fallbackCopyText = (text) => {
  return new Promise((resolve, reject) => {
    const textarea = document.createElement('textarea')
    textarea.value = text
    textarea.style.position = 'fixed'
    textarea.style.top = '0'
    textarea.style.left = '0'
    textarea.style.opacity = '0'
    document.body.appendChild(textarea)

    try {
      textarea.select()
      const success = document.execCommand('copy')
      document.body.removeChild(textarea)

      if (success) {
        showNotify({ type: 'success', message: '复制成功' })
        resolve(true)
      } else {
        reject(new Error('execCommand复制失败'))
      }
    } catch (err) {
      document.body.removeChild(textarea)
      reject(err)
    }
  })
}
</script>
<template>
  <div class="container">
    <div class="mt-32px">
      <div class="h-250 user pr-134px py-18 pl-20px">
        <div class="text-[#fff]/60 text-26px font-380 font-miSans">我的邀请码</div>
        <div class="text-[#fff] text-40px font-700 font-miSans mt-8px">WADADSDA</div>
        <div class="flex mt-22px">
          <div class="flex items-center py-6 bg-[#F76938] rounded-4444px pl-24px pr-8px van-haptics-feedback"
            @click="() => copyContent(userInfo?.code || '')">
            <div class="text-24px text-[#FFFFFF] font-450 font-miSans van-haptics-feedback">
              复制
            </div>
            <div class="flex items-center justify-center">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 33 32" fill="none">
                <g opacity="0.6">
                  <path
                    d="M23.1131 16.3265L14.9097 7.49216H11.1235L19.3269 16.3265L11.1235 24.5295H14.9097L23.1131 16.3265Z"
                    fill="white" />
                </g>
              </svg>
            </div>
            <div class="flex items-center justify-center" style="margin-left: -8px">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 33 32" fill="none">
                <path
                  d="M23.1131 16.3265L14.9097 7.49216H11.1235L19.3269 16.3265L11.1235 24.5295H14.9097L23.1131 16.3265Z"
                  fill="white" />
              </svg>
            </div>
          </div>
        </div>
        <div
          class="bg-[url('/src/assets/imgs/community/top_right_bg.png')] w-270 h-270 bg-[length:100%] absolute right-0 top-[-64px]">
        </div>
      </div>
      <div class="p-16 rounded-30px bg-[#fff]/10 mt-30px">
        <div class="flex items-center justify-between">
          <div class="text-[#FFFFFF] text-26px font-630 font-miSans">我的ID</div>
          <div class="flex items-center" @click="() => copyContent('111')">
            <div class="text-[#F76938] text-26px font-630 font-miSans mr-10px">WADADSDA</div>
            <div class="flex items-center justify-center">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 30 30" fill="none">
                <path
                  d="M8.75 7.5V3.75C8.75 3.41848 8.8817 3.10054 9.11612 2.86612C9.35054 2.6317 9.66848 2.5 10 2.5H25C25.3315 2.5 25.6495 2.6317 25.8839 2.86612C26.1183 3.10054 26.25 3.41848 26.25 3.75V21.25C26.25 21.5815 26.1183 21.8995 25.8839 22.1339C25.6495 22.3683 25.3315 22.5 25 22.5H21.25V26.25C21.25 26.94 20.6875 27.5 19.9912 27.5H5.00875C4.84391 27.501 4.6805 27.4694 4.5279 27.407C4.37531 27.3447 4.23654 27.2528 4.11957 27.1366C4.0026 27.0205 3.90974 26.8823 3.84632 26.7302C3.78289 26.578 3.75016 26.4148 3.75 26.25L3.75375 8.75C3.75375 8.06 4.31625 7.5 5.01125 7.5H8.75ZM11.25 7.5H21.25V20H23.75V5H11.25V7.5ZM8.75 13.75V16.25H16.25V13.75H8.75ZM8.75 18.75V21.25H16.25V18.75H8.75Z"
                  fill="#F76938" />
              </svg>
            </div>
          </div>
        </div>
        <div class="flex items-center justify-between mt-20px">
          <div class="text-[#FFFFFF]/50 text-20px font-330 font-miSans">推荐人邀请码</div>
          <div class="flex items-center">
            <div class="text-[#FFFFFF]/50 text-20px font-330 font-miSans">WADADSDA</div>
          </div>
        </div>
      </div>
      <div class="rounded-[30px] p-30 pb-28px bg-[#fff]/10 mt-30px">
        <div class="flex items-center justify-between">
          <div class="flex items-center">
            <div
              class="bg-[#F76938] rounded-[15px] px-16 py-6 text-24px text-[#FFFFFF] font-400 font-miSans line-height-42px">
              我的等级
            </div>
            <div class="text-34px text-[#FFFFFF] font-700 font-miSans line-height-42px ml-12">
              V1
            </div>
          </div>
          <!-- <div class="text-12px text-[#000] font-450 font-miSans line-height-20px">身份：{{
            userInfo.node_rank_name ||
            '-'
          }}
          </div> -->
        </div>
        <div class="mt-20px bg-[#fff]/10 h-1"></div>
        <div class="flex items-center mt-26px">
          <div class="w-33% flex items-center justify-start flex-col">
            <div class="text-22px text-[#fff]/50 font-330 font-miSans line-height-30px mb-6">
              总奖励USDT
            </div>
            <div class="text-30px text-[#fff] font-520 font-miSans line-height-42px">
              0
            </div>
          </div>
          <div class="h-60 w-1 bg-[#FFFFFF]/10"></div>
          <div class="w-33% flex items-center flex-col">
            <div class="text-22px text-[#fff]/50 font-330 font-miSans line-height-30px mb-6">
              总奖励BTC
            </div>
            <div class="text-30px text-[#fff] font-520 font-miSans line-height-42px">
              1500M
            </div>
          </div>
          <div class="h-60 w-1 bg-[#fff]/10"></div>
          <div class="w-33% flex items-center justify-start flex-col">
            <div class="text-22px text-[#fff]/50 font-330 font-miSans line-height-30px mb-6">
              总算力
            </div>
            <div class="text-30px text-[#fff] font-520 font-miSans line-height-42px">
              1500M
            </div>
          </div>
          <!-- <div class="h-30 w-1 bg-[#000]/10"></div> -->
        </div>
        <div class="flex items-center mt-26px">
          <div class="w-33% flex items-center justify-start flex-col">
            <div class="text-22px text-[#fff]/50 font-330 font-miSans line-height-30px mb-6">
              直推人数
            </div>
            <div class="text-30px text-[#fff] font-520 font-miSans line-height-42px">
              0
            </div>
          </div>
          <div class="h-60 w-1 bg-[#FFFFFF]/10"></div>
          <div class="w-33% flex items-center flex-col">
            <div class="text-22px text-[#fff]/50 font-330 font-miSans line-height-30px mb-6">
              团队人数
            </div>
            <div class="text-30px text-[#fff] font-520 font-miSans line-height-42px">
              1500M
            </div>
          </div>
          <div class="h-60 w-1 bg-[#fff]/10"></div>
          <div class="w-33% flex items-center justify-start flex-col">
            <div class="text-22px text-[#fff]/50 font-330 font-miSans line-height-30px mb-6">
              总算力
            </div>
            <div class="text-30px text-[#fff] font-520 font-miSans line-height-42px">
              1500M
            </div>
          </div>
          <!-- <div class="h-30 w-1 bg-[#000]/10"></div> -->
        </div>
      </div>
      <div class="p-30 bg-[#FFFFFF1A] rounded-[30px] mt-30px">
        <div class="flex items-center">
          <div class="w-10px h-32px bg-[#F76938] rounded-[154px]"></div>
          <div class="text-32px text-[#FFFFFF] font-700 font-roboto line-height-32px ml-12px">
            邀请记录
          </div>
        </div>
        <div class="flex flex-col gap-20px mt-24px">
          <div class="item py-24px px-26 bg-[#13131C] rounded-[14px]" v-for="item in 10" :key="item.created_at">
            <div class="flex items-center justify-between">
              <div class="text-26px text-[#FFFFFF] font-380 font-miSans">{{ item.address || '--' }}</div>
              <div class="text-26px text-[#FFFFFF] font-630 font-miSans">+{{ item.self_yeji || '--' }}U</div>
            </div>
            <div class="flex items-center justify-between mt-12px">
              <div class="text-20px text-[#FFFFFF]/60 font-330 font-miSans">
                注册时间：{{ item.created_at || '--' }}
              </div>
              <div class="text-22px text-[#FFFFFF]/60 font-330 font-miSans">业绩</div>
            </div>
          </div>
          <van-empty v-if="!teamList.length" image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
            image-size="80" description="暂无记录" />
        </div>

      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.van-hairline--surround {
  padding: 6px 10px;
  border-radius: 6px;
}

.container {
  width: 100%;
  min-height: 100vh;
  background: linear-gradient(173deg, #fafafc 5.44%, #e3e4ea 68.12%, #fff 95.98%);

  // padding-top: calc(220px / 2);
  // height: 100vh;
  // display: flex;
  // flex-direction: column;
  // background-color: #f5f5f5;
  .body {
    width: 100%;
    position: relative;
  }
}

.top {
  position: relative;
}

.user {
  position: relative;
  background: url('/src/assets/imgs/community/top_bg.png') no-repeat;
  background-size: 100% 100%;
}
</style>
